<template>
  <div id="app">
    <!-- 头部组件 -->
    <city-choice></city-choice>
    <!-- 搜索组件 -->
    <city-search :list="allcity"></city-search>
    <!-- 热门城市搜索 -->
    <current-city :list="allcity" :lists="hotcity" :leet="Letter"></current-city>
    <!-- 城市首字母 -->
    <city-letter :list="allcity" @letter="dianjiletter"></city-letter>
  </div>
</template>

<script>
import axios from 'axios' // 直接在Home组件中，获取一次性所以数据 提高效率 节约服务器资源
import CityChoice from './citychoice/Header.vue'
import CitySearch from './citychoice/Search.vue'
import CurrentCity from './citychoice/hotcity.vue'
import CityLetter from './citychoice/Letter.vue'
export default {
  name: 'city',
  components: { /* 注册组件 */
    CityChoice,
    CitySearch,
    CurrentCity,
    CityLetter
  },
  data () {
    return {
      allcity: {},
      hotcity: [],
      Letter: ''
    }
  },
  methods: {
    cityinfo () {
      axios.get('localdata/city.json')
        .then((res) => {
          this.chenggong(res)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    chenggong (res) {
      let dataObj = res.data // json中的所以数据
      let dataList = dataObj.data // 保存到列表数据
      if (dataObj.ret && dataList) { // 如果后台处理成功 并且列表数据有值，才能相关的数据操作
        // console.log(dataList.cities)
        this.allcity = dataList.cities
        this.hotcity = dataList.hotCities
      }
    },
    dianjiletter (i) {
      this.Letter = i
    }
  },
  mounted () {
    this.cityinfo()
  }
}
</script>
